import { useState, useMemo } from 'react'

export default function TestUseMemo() {
  const [a, setA] = useState(0)
  const [b, setB] = useState(0)
  const [c, setC] = useState(0)
  const handleClick = (type) => {
    if (type === 'a') {
      setA(a + 1)
    } else if (type === 'b') {
      setB(b + 1)
    } else if (type === 'c') {
      setC(c + 1)
    } else {
      return false 
    }
  }
  const aPlusBByMemo = useMemo(() => {
    console.log('只有a或者b变化了才执行useMemo 类似vue的computed')
    return <b>{a + b}</b>
  }, [a, b])
  const aPlusB = (() => {
    console.log('a、b、c任意一个有变化都执行这里')
    return <b>{a + b}</b>
  })()
  return (
    <div>
      <div className='item'>
        <span>a: {a}</span>
        <span>b: {b}</span>
        <span>c: {c}</span>
      </div>
      <div className='item'>
        <span><button onClick={() => handleClick('a')}>+a</button></span>
        <span><button onClick={() => handleClick('b')}>+b</button></span>
        <span><button onClick={() => handleClick('c')}>+c</button></span>
      </div>
      <div className='item'>
        <span>aPlusBByMemo: {aPlusBByMemo}</span>
        <span>aPlusB: {aPlusB}</span>
      </div>
    </div>
  )
}